<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class="form">
        <p class="input-group">
            <input class="user" type="text">
            <span class="tips"></span>
        </p>
        <p class="input-group">
            <input class="btn" type="submit" value="提交">
        </p>
    </div>
</body>
<script>

    // 字节统计:
    // 中英文混合使用, 一个英文占一个字节,一个中文占两个字节  => 合计不能超过14个  (最小1)

    var userInp = document.getElementsByClassName("user")[0];
    var tips = document.getElementsByClassName("tips")[0];
    var btn = document.getElementsByClassName("btn")[0];

    // "a123123"        len:  7  字节:7
    // "a123123哈哈"    len: 7+2 => 9  字节:7+4=>11



    btn.onclick = function () {
        var user = userInp.value;
        console.log(user);
        console.log(user.length);


        // 第一种方法:
        // 分开统计: 遍历字符串 取每一个字符 判断如果是英文加一个字节  是中文加两个字节
        // var count = 0;
        // for (var i = 0; i < user.length; i++) {  // 遍历字符串
        //     var char = user.charAt(i);  //  取每一个字符 "a" "1" "哈"
        //     var reg = /[\u4e00-\u9fa5]/;
        //     if (reg.test(char)) {
        //         count += 2;
        //     } else {
        //         count++;
        //     }
        // }
        // console.log(count);



        // 第二中方法:
        // 原本一个中文算两个字节,但是在字符串的str.length属性中 无论中英文都算一个字符 (=> 一个中文就少算一个字节)  -> 有多少中文就少算多少

        var reg = /[\u4e00-\u9fa5]/g;

        var arr = user.match(reg);   // 将匹配的内容放到数组中  -> 有就返回数组  没有就返回null

        var count = user.length;  // 原本的字符长度
        if (arr) {
            count += arr.length;  // 有一个中文就加几?
        }
        console.log(count);






    }







</script>

</html>